<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捆绑</title>
</head>
<body>

<img id="img" src="img/01.png"/>
<br/>
<!--<button id="up" onclick="up()">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;
<button id="down" onclick="down()">下一张</button>-->

<button id="up">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;
<button id="down">下一张</button>

</body>

<script>
    function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/01.png");
    }

    function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/02.png");
    }

    let upBut = document.getElementById("up");
    upBut.onclick = up;

    let downBut = document.getElementById("down");
    downBut.onclick = down;

</script>

</html>